<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/
  .weui-cell_select {
    padding: 10px 15px;
  }
  .weui-cells__title {
    text-align: left;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  input.time {
    border: none;
    font-size: 16px;
    padding-left: 10px;
  }
</style>
<template>
  <div class="oitem">
    <div class="weui-cells__title">货品明细{{itemNo + 1}}
      <p id="acts" style="float: right;color: #1aad19;" v-if="isLast">
        <span id="addItem" @click="addItem" style="padding-right: 5px;">添加</span>
        <span v-if="itemNo != 0">|</span>
        <span id="delItem" style="padding-left: 5px;" @click="delItem" v-if="itemNo != 0">删除</span>
      </p>
    </div>
    <div class="weui-cell fir">
      <div class="weui-cell__hd"><label class="weui-label">产品类型</label></div>
      <div class="weui-cell__bd">
        <select class="weui-select" name="productflag" v-model="productflag">
          <option v-for="(item, index) in productflags" :value="item.dictValue" >{{item.dictLabel}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell weui-cell_select">
      <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
      <div class="weui-cell__bd">
        <select class="weui-select product" :id="'product' + itemNo" v-model="productid">
          <option value="" disabled>请选择</option>
          <option v-for="(item, index) in commonproducts" :value="item.productId">{{item.productName}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
      <div class="weui-cell__bd">
        <model-list-select :list="specs"
                           v-model="specid"
                           option-value="speId"
                           option-text="speName"
                           placeholder="请选择">
        </model-list-select>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">单价</label></div>
      <div class="weui-cell__bd">
          <input class="weui-input price inlinput1" type="number" v-model="price" placeholder="请输入单价" @change="doEmitter">
         <input class="weui-input inlinput2" type="text" readonly :value="packUnit(currProduct.unit, currency)">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">订单数量</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input weight" style="width: 80%;display: inline-block;" v-model="weight" type="number" placeholder="需进行结算的重量" @change="doEmitter">
        <input class="weui-input" style="width: 15%;display: inline-block;" type="text" readonly :value="currProduct.unit || '吨'">
      </div>
    </div>
    <div class="weui-cell" v-if="settletype == 1 && paytype < 4">
      <div class="weui-cell__hd"><label class="weui-label">赠送数量</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" style="width: 80%;display: inline-block;" type="number" v-model="handselcount" placeholder="赠送，不结算">
        <input class="weui-input" style="width: 15%;display: inline-block;" type="text" readonly :value="currProduct.unit">
      </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" v-model="remark" placeholder="请输备注内容" rows="2" @change="doEmitter"></textarea>
        </div>
    </div>
  </div>
</template>

<script>
  import 'vue-search-select/dist/VueSearchSelect.css'
  import {ModelListSelect} from 'vue-search-select'
export default {
  name: 'EditSellformItem',
  data () {
    return {
       productid: '',
      specid: '',
      weight: '',
      commonproducts: [],
      specs: [],
      currProduct: '',
      contractProducts: [],
      contractSpecs: [],
      prices: '',
      price: '',
      handselcount: '',
      handselweight: '',
      currPro: '',
      remark: '',
      productflags: [],
      productflag: '',
    }
  },
  components: {ModelListSelect},
  props: [
      'itemNo',
      'isLast',
      'departid',
      'products',
      'contract',
      'quitsrtype',
      'settletype',
      'prodpricestra',
      'currency',
      'orgid',
      'paytype',
      'initItemlen',
      'itemdata',
  ],
  computed: {
    payUnit: function () {
      return this.settletype == 1 ? '元/件' : '元/吨';
    }
  },
  created() {
    // this.getProducts();
    this.getProductflags();
  },
  mounted() {
    let that = this;
    // $('#formid').on('blur', '.price', function () {
    //   let cthis = $(this);
    //   let val = $(this).val();
    //   if (that.settletype == 1) {
    //     if (val > 1000) {
    //       $.confirm('该订单目前按件计价，确认单价是' + val + '元/件？', function () {}, function () {
    //         cthis.val('');
    //       });
    //     }
    //   } else {
    //     if (val < 1000) {
    //       $.confirm('该订单目前按重量计价，确认单价是' + val + '元/吨？', function () {}, function () {
    //         cthis.val('');
    //       });
    //     }
    //   }
    // });
  },
  watch: {
    // orgid: {
    //   immediate: true,
    //   handler: function(value) {
    //       console.log(4444)
    //       this.getProducts()
    //   }
    // },
    'productid': async function (val) {
      console.log('000000000')
      this.getSpecif(val);
      console.log(1111111111111)
      await this.getProducts();
      this.currProduct = '';
      this.currPro = this.commonproducts.filter(item => {
        return item.productId == val;
      })[0];
      console.log('this.commonproducts:', this.commonproducts)
      this.doEmitter();
    },
    'specid': async function (val) {
      this.getPrice();
      if (val) {
        if (this.specs.length <= 0) {
          await this.getSpecif(this.productid);
        }
        this.currProduct = this.specs.filter(function (item) {
          return item.speId == val;
        })[0] || '';
        console.log('this.currProduct:', this.currProduct)
        this.$forceUpdate();
      }
      this.doEmitter();
    },
    'departid': async function (val) {
        // await this.getProducts();
        this.getSpecif();
    },
    'quitsrtype': {
      immediate: true,
      handler: function(val, oldval) {
        if (val == 2 || oldval == 2) return;
        this.getProducts();
        // this.getSpecif();
      }
    },
    'currency': function (val) {
      this.getPrice();
    },
    'settletype': {
      immediate: true,
      handler: function(val) {
        if (val == 1 || this.itemdata.productname.indexOf('半成品') > -1) {
          this.productflag = 5;
          // this.getProducts();
        } else if (val == 2) {
          this.productflag = '1,2,3,4';
          // this.getProducts();
        }
        this.productid = '';
        this.getSpecif();
        this.getPrice();
      }
    },
    'handselcount': function (val) {
      let place = String(val).indexOf(".") + 1;
      if (place > 0) {
        this.handselcount = '';
        this.toastText('赠送数量不能为小数');
      }
      if (parseInt(val) >= parseInt(this.weight)) {
        this.toastText('赠送重量必须小于订单重量');
        this.handselcount = '';
      }
      this.doEmitter();
    },
    'productflag': function (val) {
      this.getProducts();
      this.productid = '';
      this.specs = [];
      this.specid = '';
    },
    itemdata: {
      immediate:true,
      handler: function(value) {
        this.productid = value.productguid;
        this.specid = value.spguid;
        this.price = value.price;
        // this.orderpack = value.orderpack;
        // this.handselcount = value.handselcount;
        this.weight = value.weight;
        this.handselcount = value.handselcount;
        this.remark = value.remark;
        this.$forceUpdate();
        this.doEmitter();
      }
    }
  },
  methods: {
    getProductflags: async function() {
      let that = this;
      this.axios({
        method: 'get',
        url: '/prod-api/system/dict/data/type/sellform_product_flag',
      }).then(response => {
        if (response.data.code == 200) {
          that.productflags = response.data.data;
        } else {
          this.toastText('获取货品类型数据失败');
        }
      });
    },
    doEmitter(){
      console.log('doEmitter:', this.itemNo)
      console.log('this.currPro:', this.currPro)
      console.log('this.currProduct:', this.currProduct)
      if (!this.currPro || !this.currProduct) return;
      this.model = {
        flag: this.currPro.flag,
        productname: this.currPro.productName,
        productguid: this.productid,
        spname: this.currProduct.speName,
        spguid: this.currProduct.speId,
        price: this.price,
        remark: this.remark
      };
      if (this.settletype == 1) {
        this.model.deductrate = this.prices.concession;
      }
      this.model.weight = this.weight;
      this.model.unit = this.currProduct.unit || '吨'
      if (this.settletype == 1 && this.paytype < 4) {
        this.model.handselcount = this.handselcount;
      }
      this.model.index = this.itemNo;
      console.log('doEmitter2')
      this.$emit('changeData', this.model);
    },
    packUnit: function(unit, currency) {
      return unit != undefined && unit != '' ? currency == 2 ? '美元/' + unit : '元/' + unit : '';
    },
    getProducts: async function() {
      console.log('this.quitsrtype:', this.quitsrtype)
      console.log('this.orgid:', this.orgid)
      console.log('this.productflag:', this.productflag)
      if (!this.quitsrtype || !this.productflag) return;
      let postData = {
        'type': this.quitsrtype,
        'productflag': this.productflag
      };
      await this.axios({
        method: 'get',
        url: '/prod-api/products/getProducts',
        params: postData
      }).then((response) => {
        if (response.data.code == 200) {
          this.commonproducts = response.data.data;
        } else {
          this.toastText('获取产品数据失败')
        }

      })
    },
    getSpecif: async function() {
      if (!this.productid) return;
      await this.axios({
        method: 'get',
        url: '/prod-api/products/getSpes',
        params: {'type': this.quitsrtype, productId: this.productid, deptId: this.departid, valuation: this.settletype}
      }).then((response) => {
        if (response.data.code == 200) {
          this.specs = response.data.data;
          // this.specid = this.specs.length > 0 ? this.specs[0].speId : '';
        } else {
          this.toastText('获取规格数据失败')
        }

      })
    },
    getPrice: function() {
      if (this.specid == '') return;
      this.axios({
        method: 'get',
        url: '/prod-api/products/getPrice',
        params: {speId: this.specid, currency: this.currency, valuation: this.settletype}
      }).then((response) => {
        if (response.data.code == 200) {
          this.prices = response.data.data != undefined ? response.data.data : '';
          // this.price = this.prices != '' ? this.prices.price : '';
          this.doEmitter();
        } else {
          this.toastText('获取价格数据失败')
        }

      })
    },
    addItem: function() {
      this.$emit('doAddItem');
    },
    delItem: function() {
      this.$emit('doDelItem');
    }
  }
}
</script>
